<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<fmt:setLocale value="${config.locale.language}"/>
<fmt:setBundle basename="vn.ugame.bundle.Language" var="languageBundle"/>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>UGame | Store</title>

        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.raty.min.js"></script>
        <script type="text/javascript" src="/js/jquery.jcarousel.min.js"></script>      

        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="/css/store.css" type="text/css"/>        
    </head>
    <body>
        <div id="wrapper">
            <jsp:include page="template/header.jsp" flush="false"/>
            <div id="main">
                <div id="slider">
                    <div id="banner-slider">
                        <ul>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/1-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/2-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/3-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/4-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/5-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/1-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/2-small.jpg" alt="" /></a></li>
                        </ul>
                    </div>
                    <div id="banner-slider-current">
                        <ul>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/2-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/3-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/4-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/5-small.jpg" alt="" /></a></li>
                            <li><a href="#"><img width="180" height="120" src="/items/banners/1-small.jpg" alt="" /></a></li>
                        </ul>
                    </div>
                    <a href="#" id="slider-back"></a>
                    <a href="#" id="slider-next"></a>
                </div>
                <!-- End #slide -->                
                <div class="jcarousel-control">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                </div>                
                <!-- End .jcarousel-control -->
                <div id="main-content">
                    <c:set var="i" value="0"/>
                    <c:forEach var="item" items="${model.result}">
                        <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                        <div class="item <c:out value="${i%2==1 ? 'alternate-item' : ''}"/>">
                            <div class="status status-<c:out value="${item.status}"/>">
                            </div><!-- End .status -->
                            <img class="game-icon" src="<c:url value="/image-engine/${item.id}/1" />" alt=""/>
                            <div class="content">
                                <h4><c:out value="${item.text}"/></h4>
                                <p>
                                    <fmt:message 
                                        key="ugame.store.total-downloads" 
                                        bundle="${languageBundle}"/>
                                    <fmt:formatNumber 
                                        value="${item.downloadNumber}" 
                                        type="number" 
                                        groupingUsed="false" />
                                    <c:out value=" | "/>
                                    <fmt:message 
                                        key="ugame.store.modified-date" 
                                        bundle="${languageBundle}"/>
                                    <fmt:formatDate 
                                        type="date" 
                                        value="${item.modifiedDate}" 
                                        dateStyle="short"/>
                                </p>
                                <div id="star-<c:out value="${item.id}"/>" class="star"></div>
                                <script type="text/javascript">
                                    $('#star-<c:out value="${item.id}"/>').raty({
                                        readOnly : true,
                                        score    : <c:out value="${item.rate}"/>,
                                        size:22
                                    });
                                </script>
                                <span>
                                    <fmt:formatNumber 
                                        value="${item.rateNumber}" 
                                        type="number" 
                                        groupingUsed="false" />
                                    <c:out value=" "/>
                                    <fmt:message 
                                        key="ugame.store.ratings" 
                                        bundle="${languageBundle}"/>
                                </span>
                            </div><!-- End .content -->
                            <div class="action">
                                <c:if test="${item.price > 0}">
                                    <c:if test="${config.locale.language == 'en-us'}">
                                        <p class="price">
                                            <fmt:formatNumber 
                                                value="${item.price}" 
                                                type="currency"/> 
                                        </p>
                                    </c:if>
                                    <c:if test="${config.locale.language == 'vi-vn'}">
                                        <p class="price">
                                            <fmt:formatNumber 
                                                value="${item.price}" 
                                                type="currency"
                                                maxFractionDigits="0"/>   
                                        </p>
                                    </c:if>
                                </c:if>
                                <c:if test="${item.price == 0}">
                                    <p class="free">Free</p>
                                </c:if>
                                <p class="more"></p>
                            </div><!-- End .action -->
                        </div><!-- End .item -->
                        <a/>
                        <c:set var="i" value="${i+1}"/>
                    </c:forEach>
                </div><!-- End #main-content -->

                <div id="category-nav">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="#" onclick="return false;" id="category">
                                    <fmt:message 
                                        key="ugame.categories" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">
                                    <fmt:message 
                                        key="ugame.top-new" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">  
                                    <fmt:message 
                                        key="ugame.top-rate" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">
                                    <fmt:message 
                                        key="ugame.hot" 
                                        bundle="${languageBundle}"/>
                                    <span class="hot">!</span>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- End #category-nav -->
                <div id="category-sub-nav">
                    <c:forEach var="category" items="${categories}">
                        <a href="/<c:url value="${category.name}"/>">
                            <c:out value="${category.text}"/>
                        </a>
                    </c:forEach>
                </div>
                <!-- End #category-sub-nav -->
                <div id="paging">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="paging-word">
                                <c:if test="${model.page <= 1}">
                                    <a href="#" onclick="return false">
                                        <fmt:message 
                                            key="ugame.first-page" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </c:if>
                                <c:if test="${model.page > 1}">
                                    <a href="<c:url value="/${config.name}/1/${model.keyword}"/>">
                                        <fmt:message 
                                            key="ugame.first-page" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </c:if>
                            </td>
                            <td class="paging-control">
                                <c:if test="${model.page <= 1}">
                                    <a href="#" onclick="return false"><<</a>
                                </c:if>
                                <c:if test="${model.page > 1}">
                                    <a href="<c:url value="/${config.name}/${model.page - 1}/${model.keyword}"/>"><<</a>
                                </c:if>
                            </td>
                            <td id="paging-number">
                                <fmt:message 
                                    key="ugame.page" 
                                    bundle="${languageBundle}"/>
                                <c:out value="${model.page}/${model.pageCount}"/>
                            </td>
                            <td class="paging-control">
                                <c:if test="${model.page >= model.pageCount}">
                                    <a href="#" onclick="return false">>></a>
                                </c:if>
                                <c:if test="${model.page < model.pageCount}">
                                    <a href="<c:url value="/${config.name}/${model.page + 1}/${model.keyword}"/>">>></a>
                                </c:if>
                            </td>
                            <td class="paging-word">
                                <c:if test="${model.page >= model.pageCount}">
                                    <a href="#" onclick="return false">
                                        <fmt:message 
                                            key="ugame.last-page" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </c:if>
                                <c:if test="${model.page < model.pageCount}">
                                    <a href="<c:url value="/${config.name}/${model.pageCount}/${model.keyword}"/>">
                                        <fmt:message 
                                            key="ugame.last-page" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </c:if>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- End #paging -->
            </div>
            <!-- End #main -->
            <jsp:include page="template/footer.jsp" flush="false"/>
            <div class="clear"></div>
        </div>
        <!-- End #wrapper-->
        <script type="text/javascript" src="/js/custom.js"></script>
        <script type="text/javascript" src="/js/store.js"></script>
    </body>
</html>